<template>
	<view>
		<!-- 		<cu-custom :bgColor="bgColor">
			<block slot="content">{{ pageTitle }}</block>
		</cu-custom> -->
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading" class="container">
			<img :src="imageSrc" alt="背景图片" class="background-image" />
			<!-- <view class="viewbox"></view> -->
			<!-- 这里面写页面内容 -->
			<!-- 中间的 -->
			<view class="index_c">
				<!-- <u-scroll-list indicatorColor="#EFEFEF" indicatorActiveColor="#E71102"> -->
				<view class="index_cc">
					<view class="index_c_a" @click="goPage('/pages/goods/list')">
						<view class="index_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="index_c_a_b">测试中心</view>
					</view>
					<view class="index_c_a" @click="goPage('/pages/curriculum/list')">
						<view class="index_c_a_a">
							<image :src="index_2"></image>
						</view>
						<view class="index_c_a_b">商学院</view>
					</view>
					<view class="index_c_a" @click="goPage('/pages/user/user_vip',1)">
						<view class="index_c_a_a">
							<image :src="index_3"></image>
						</view>
						<view class="index_c_a_b">商城</view>
					</view>
					<view class="index_c_a" @click="goPage('/pages/tutor/vendor')">
						<view class="index_c_a_a">
							<image :src="index_4"></image>
						</view>
						<view class="index_c_a_b">导师</view>
					</view>
					<view class="index_c_a" @click="punchtheclock()">
						<view class="index_c_a_a">
							<image :src="index_5"></image>
						</view>
						<view class="index_c_a_b">会员</view>
					</view>
				</view>

				<!-- </u-scroll-list> -->
			</view>
			
			<!-- 测试中心 -->
			<view class="center-box">
				<span class="inner">测试中心</span>
			</view>
			<!-- 测试内容 -->
			<view class="cindex_c">
				<view class="cindex_cc">
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">个人测试</view>
						<view class="cindex_c_a_b_b">了解你的个人特质等信息</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
						
					</view>
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">匹配关系</view>
						<view class="cindex_c_a_b_b">了解匹配关系和相处模式</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
					</view>
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">财富密码</view>
						<view class="cindex_c_a_b_b">获取财富密码和赚钱秘籍</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
					</view>
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">情欲蓝图</view>
						<view class="cindex_c_a_b_b">获取财富密码和赚钱秘籍</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
					</view>
				</view>
			</view>
			
			
		</view>
		<!-- tabbar 在最底部(有些页面不需要tabbar)，可以注释掉) -->
		<u-tabbar :value="tabbar_index" :fixed="true" :border="false" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#442c74" inactiveColor="#b1abbd" zIndex='99' @change="tabbar_change">
			<u-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :text="item.text"
				:icon="tabbar_index == index ? item.activeIcon : item.icon"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		APP_CONFIG
	} from '@/config/app.config.js';

	import request from '@/common/request.js';
	import {
		goPage
	} from '@/common/oyyl-js/util'; // 跳转页面方法goPage(url, isAuth),isAuth:1需要登录,0不需要登录,默认为0
	export default {
		data() {
			return {
				imageSrc: require('../../static/bg.png'),
				showLoading: true,
				tabbar_index: 0, // 当前选中的tabbar 0:首页，1:订单，2:购物车，3:我的
				uid: 0, // 用户id
				tabbarItems: APP_CONFIG.tabbarItems, // tabbar配置
				projectName: APP_CONFIG.projectName, // 项目名称
				// pageTitle: '个人中心', // 当前页面标题 <!--需要修改-->
				// bgColor: 'bg-gradual-fff', //顶部背景色
			};
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
		},
		mounted() {
			// 请求商品数据
			this.fetchGoodsList();
		},
		methods: {
			tabbar_change(e) {
				const url = this.tabbarItems[e].url;
				uni.reLaunch({
					url
				});
			},
			//下面写其他方法
			// 示例：请求商品数据
			fetchGoodsList() {
				// 请求参数
				const paramsList = {}
				// 请求配置
				let optsList = {
					url: 'g-goodslist',
					method: 'get'
				};
				let _this = this;
				// 如果是需要登录才能访问的接口，使用request.httpTokenRequest
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						// 请求成功
						const data = res.data.data;
						console.log(data);
					}
				}).catch(e => {
					// 请求失败
					console.log(e);
				}).finally(() => {
					// 请求结束
					_this.showLoading = false;
				});
			},
		},

		onShareAppMessage(res) { //分享给朋友
			return {
				title: this.projectName,
				path: this.tabbarItems[0].url,
			};
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: this.projectName,
				path: this.tabbarItems[0].url,
			};
		}

	};
</script>


<style lang="scss" scoped>
	.container {
		// position: relative;
		width: 100%;
		height: 200vh;
		background: #120517;
		z-index: -2;
		/* 使容器占满整个视口高度 */


		.background-image {
			width: 100%;
			height: 100vh;
			object-fit: cover;
			/* 使图片覆盖整个容器 */
			position: absolute;
			/* 使图片绝对定位 */
			top: 0;
			left: 0;
			z-index: 1;
			/* 将图片放在文字后面 */
		}



		// 中间
		.index_c {
			width: 700rpx;
			height: auto;
			background: #110416;
			border-radius: 12rpx;
			margin: 1580rpx 25rpx 0 25rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: inset 0 0 20rpx 10rpx rgba(85, 56, 105, 0.7);
			position: absolute;
			z-index: 1;
			// overflow-y: auto;	

			.index_cc {
				min-width: 896rpx;
				overflow: hidden;

				.index_c_a {
					width: 128rpx;
					overflow: hidden;
					float: left;

					.index_c_a_a {
						width: 80rpx;
						height: 80rpx;
						margin: auto;
						background: #fefdfe;
						border-radius: 30rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 30rpx;
						}
					}

					.index_c_a_b {
						font-size: 28rpx;
						font-weight: normal;
						letter-spacing: 0px;
						line-height: 36rpx;
						color: #968e99;
						text-align: center;
						vertical-align: top;
						margin-top: 20rpx;
					}


				}
			}
		}
		
		
		
		
		.center-box {
			width: 550rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 48rpx;
			// color: #9f8772;
			
			overflow: hidden;
			// border: 1px solid red;
			font-weight: 600;
			font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			position: absolute;
			margin: 1810rpx 100rpx 0 100rpx;
			
			.inner{
			    position: relative;
				 background: linear-gradient(90deg, #f8c49e, #fceed2); /* 渐变色 */
				  -webkit-background-clip: text; /* 背景裁剪为文本 */
				  -webkit-text-fill-color: transparent; /* 填充颜色透明 */
			}
			.inner::before,.inner::after{
			    position: absolute;
			    content: '';
			    width: 9999px;
			    height: 1px;
			    background: #9f8772;
			    top: 50%;
			}
			.inner::before{
			    right: 100%;
			    margin-right: 10px;
			}
			.inner::after{
			    margin-left: 10px;
			}
		}
		
		
		// 中间
		.cindex_c {
			width: 700rpx;
			height: auto;
			background: #f4f5f7;
			border-radius: 12rpx;
			position: absolute;
			margin: 1980rpx 20rpx 0 20rpx;
			padding: 30rpx;
			overflow-y: auto;
			
		
			.cindex_cc {
				// border: 1px solid red;
				
				min-width: 1148rpx;
				overflow: hidden;
		
				.cindex_c_a {
					background: #ffffff;
					border-radius: 20rpx;
					width: 252rpx;
					height: 472rpx;
					box-shadow: inset 0 0 20rpx 10rpx rgba(85, 56, 105, 0.7);
					margin-right: 15rpx;
					// border: 1px solid red;
					overflow: hidden;
					float: left;
		
					.cindex_c_a_a {
						width: 80rpx;
						height: 80rpx;
						margin: auto;
						margin-top: 10rpx;
						background: #cccccc;
						border-radius: 50%;
						
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}
		
					.cindex_c_a_b {
						font-size: 28rpx;
						font-weight: normal;
						letter-spacing: 0px;
						line-height: 36rpx;
						color: #333333;
						text-align: center;
						vertical-align: top;
						margin-top: 20rpx;
					}
					.cindex_c_a_b_b {
						font-family: Source Han Sans;
						// border: 1px solid red;
						color: #c2c2c2;
						font-size: 20rpx;
						width: 240rpx;
						margin: 10rpx 0 0 10rpx;
						height: 36rpx;
					}
					
					.cindex_c_a_b_b_b {
						width: 144rpx;
						height: 56rpx;
						border: 1px solid #06443A;
						border-radius: 20rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						margin: 10rpx 0 0 50rpx;
						padding: 10rpx 0 0 21rpx;
					}
				}
			}
		}
	}
</style>